/*
  学习目标：动态路由  
  1. 在 path 使用 :id 的方式来配置动态的路由参数
  2. 通过 props.match.id 获取
  建议： 工作中较少使用，一般直接通过 props redux 等传递数据即可
*/

import React from 'react';
import ReactDom from 'react-dom/client';
// import 引进时改名使用as,那么以后要切换路由模式，只需要把引进的 属性 改名即可
import {
  HashRouter as Router,
  Route,
  Link,
  Switch,
  Redirect,
} from 'react-router-dom';

class Handler extends React.Component {
  render() {
    return (
      <div>
        {/* HashRouter负责路由实例化 */}
        <Router>
          <Link to="/home">首页</Link>
          <br />
          <Link to="/my/123">我的音乐</Link>
          <br />
          <Link to="/friend">发现</Link>

          {/* Swtich组件的作用：匹配到任意一个路径，就停止匹配 */}
          {/* 👍推荐用Swtich组件包住所有的Route */}
          <Switch>
            {/* Redirect重定向 - 配合exact使用 */}
            {/* from代表需要重定向的路径， to代表实际去到的路径 */}
            <Redirect from="/" to="/friend" exact></Redirect>
            <Route path="/home" component={Home}></Route>
            {/* 1. 设置动态路由：   '/路径/:自定义属性名' */}
            <Route path="/my/:id" component={My}></Route>
            <Route path="/friend" component={Friend}></Route>
            {/*404一定是通配--不写path匹配所有不存在页面，并且要写在最后面 */}
            <Route component={NotFount}></Route>
          </Switch>
        </Router>
      </div>
    );
  }
}

function Home(props) {
  console.log('props----->', props);
  return (
    <div>
      <h1>我是Home组件</h1>
      <button onClick={() => props.history.push('/my')}>点我push到my</button>
      <button onClick={() => props.history.replace('/friend')}>
        点我replace到friend
      </button>
      <button onClick={() => props.history.goBack()}>点我后退一步</button>
      <button onClick={() => props.history.go(-2)}>点我后退两步</button>
    </div>
  );
}
function My(props) {
  // 2. 获取动态路由参数：props.match.params.自定义属性名
  console.log('Myprops----->', props);
  console.log('My-id----->', props.match.params.id);
  return (
    <div>
      <h1>我是My组件</h1>
    </div>
  );
}
function Friend() {
  return (
    <div>
      <h1>我是Friend组件</h1>
    </div>
  );
}
function NotFount() {
  return <div>我是NotFount-404组件</div>;
}
// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
